<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>车位信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>管理车位信息</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区 -->
    <el-card class="box-card">
      <!-- 搜索与添加区域区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <div style="margin-top: 15px">
            <el-input
              placeholder="请输入内容"
              v-model="param"
              class="input-with-select"
              clearable
              @clear="getSeatList()"
            >
              <el-select v-model="select" slot="prepend" placeholder="请选择">
                <el-option label="车辆编号" value="seatNum"></el-option>
                <el-option label="所属区域" value="seatSection"></el-option>
              </el-select>
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="getSeatList()"
              ></el-button>
            </el-input>
          </div>
        </el-col>

        <el-col :span="4">
          <el-col :span="4" style="padding-top: 15px">
            <el-button type="primary" @click="addDialogVisible = true"
              >添加车位</el-button
            >
          </el-col>
        </el-col>
      </el-row>

      <!-- 车位列表区 -->
      <el-table :data="seatList" border :stripe="true">
        <el-table-column type="index" label="编号"></el-table-column>
        <el-table-column prop="seatId" label="车位ID"></el-table-column>
        <el-table-column prop="seatNum" label="车位编号"></el-table-column>
        <el-table-column prop="seatSection" label="所属区域"></el-table-column>
        <el-table-column label="车位状态">
          <template slot-scope="scope"
            >{{ scope.row.seatState == 1 ? '占用' : '闲置' }}
          </template>
        </el-table-column>
        <el-table-column prop="seatTag" label="车位备注"></el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <!-- 编辑 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="showEditDialog(scope.row.seatId)"
              ></el-button>
            </el-tooltip>

            <!-- 删除 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="removeSeatById(scope.row.seatId)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <!-- 添加车位的对话框 -->
      <el-dialog
        title="添加车位"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="addDialogClosed"
      >
        <!-- 内容主体区 -->
        <span>
          <el-form
            :model="addSeatForm"
            :rules="addSeatFormRules"
            ref="addSeatFormRef"
            label-width="80px"
          >
            <el-form-item label="车位编号" prop="seatNum">
              <el-input v-model="addSeatForm.seatNum"></el-input>
            </el-form-item>
            <el-form-item label="所属区域">
              <el-select v-model="addSeatForm.seatSection" placeholder="请选择">
                <el-option label="A区" value="A区"></el-option>
                <el-option label="B区" value="B区"></el-option>
                <el-option label="C区" value="C区"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="车位备注">
              <el-input v-model="addSeatForm.seatTag"></el-input>
            </el-form-item>
          </el-form>
        </span>

        <!-- 底部区 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSeat()">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改车位信息的对话框 -->
      <el-dialog
        title="编辑车位信息"
        :visible.sync="editDialogVisible"
        width="50%"
        @close="editDialogClosed"
      >
        <!-- 主体内容区 -->
        <el-form
          :model="editForm"
          :rules="editFormRules"
          ref="editFormRef"
          label-width="80px"
        >
          <el-form-item label="车位ID">
            <el-input disabled v-model="editForm.seatId"></el-input>
          </el-form-item>
          <el-form-item label="车位编号" prop="seatNum">
            <el-input v-model="editForm.seatNum"></el-input>
          </el-form-item>
          <el-form-item label="所属区域">
            <el-select v-model="editForm.seatSection" placeholder="请选择">
              <el-option label="A区" value="A区"></el-option>
              <el-option label="B区" value="B区"></el-option>
              <el-option label="C区" value="C区"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车位状态">
            <el-radio-group v-model="editForm.seatState">
              <el-radio :label="1">占用</el-radio>
              <el-radio :label="0">闲置</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="车位备注">
            <el-input v-model="editForm.seatTag"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editSeat(editForm.seatId)"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      param: '',
      select: '',
      seatList: [],
      total: null,
      //   当前的页数
      pageNum: 1,
      //   当前每页显示多少条数据
      pageSize: 10,
      // 控制添加车位对话框的显示与隐藏
      addDialogVisible: false,
      // 添加车位的表单数据
      addSeatForm: {
        seatNum: '',
        seatSection: 'A区',
        seatTag: '',
      },
      // 添加表单的验证规则对象
      addSeatFormRules: {
        seatNum: [
          { required: true, message: '请输入车位编号', trigger: 'blur' },
        ],
      },
      // 控制修改车位对话框的显示与隐藏
      editDialogVisible: false,
      // 查询到的车位信息对象
      editForm: {},
      // 修改表单的验证规则对象
      editFormRules: {
        seatNum: [
          { required: true, message: '请输入车位编号', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    this.getSeatList()
  },
  methods: {
    async getSeatList() {
      let query = this.select
      let res
      if (query == 'seatSection') {
        res = await this.$http.post('seat/list', {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          seatSection: this.param,
        })
      } else if (query == 'seatNum') {
        res = await this.$http.post('seat/list', {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          seatNum: this.param,
        })
      } else {
        res = await this.$http.post('seat/list', {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        })
      }
      this.total = res.data.total
      this.seatList = res.data.list
    },
    handleSizeChange(newSize) {
      //监听 pageSize改变的事件
      this.pageSize = newSize
      this.getSeatList()
    },
    handleCurrentChange(newPageNum) {
      // 监听页码值改变的事件
      this.pageNum = newPageNum
      this.getSeatList()
    },
    addSeat() {
      // 添加车位
      this.$refs.addSeatFormRef.validate((valid) => {
        if (!valid) return
        this.$http.post('seat/create', this.addSeatForm).then((res) => {
          if (res.code == 200) {
            this.$message.success('添加成功')
            this.addDialogVisible = false
            this.getSeatList()
          }
        })
      })
    },
    addDialogClosed() {
      // 监听添加车位对话框的关闭事件
      Object.assign(this.$data.addSeatForm, this.$options.data().addSeatForm)
      this.$refs.addSeatFormRef.resetFields()
    },
    async showEditDialog(id) {
      // 展示编辑页面
      this.editDialogVisible = true
      const res = await this.$http.post('seat/updateInfo/' + id)
      console.log(res)
      this.editForm = res.data
    },
    editSeat() {
      // 修改车位信息
      this.$refs.editFormRef.validate((valid) => {
        if (!valid) return

        this.$http
          .post('seat/update/' + this.editForm.seatId, this.editForm)
          .then((result) => {
            this.editDialogVisible = false
            this.getSeatList()
            this.$message.success('修改成功！')
          })
      })
    },
    editDialogClosed() {
      // 监听修改车位对话框的关闭事件
      this.$refs.editFormRef.resetFields
    },
    async removeSeatById(id) {
      // 根据id删除车位

      const confirmResult = await this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err) // 取消删除

      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消删除，则返回值为字符串 cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }

      const res = await this.$http.post('seat/delete/' + id)
      if (res.code == 200) {
        this.$message.success('删除成功')
        this.getSeatList()
      } else {
        this.$message.error('删除失败')
      }
    },
  },
}
</script>

<style lang="less" scoped>
.el-select {
  width: 120px;
}
</style>
